<div class="order-service-config">
  <div ng-if="!$ctrl.success && !$ctrl.error">
    <div class="results-status">
      <span class="fa fa-clock-o text-muted" aria-hidden="true"></span>
      <span class="sr-only">Pending</span>
      <div class="results-message">
        <h3>
          <strong>{{$ctrl.name}}</strong> is being created in <strong>{{$ctrl.selectedProject | displayName}}</strong>.
        </h3>
      </div>
    </div>
  </div>
  <div ng-if="$ctrl.success">
    <div class="results-status">
      <span class="pficon pficon-ok" aria-hidden="true"></span>
      <span class="sr-only">Success</span>
      <div class="results-message">
        <h3>
          <strong>{{$ctrl.name}}</strong> has been created in <strong>{{$ctrl.selectedProject | displayName}}</strong> successfully.
        </h3>
      </div>
    </div>
  </div>
  <div ng-if="$ctrl.success && $ctrl.binding">
    <bind-results error="$ctrl.bindError"
                  binding="$ctrl.binding"
                  service-to-bind="$ctrl.serviceToBind.metadata.name"
                  bind-type="application"
                  application-to-bind="$ctrl.name"
                  show-pod-presets="$ctrl.showPodPresets">
    </bind-results>
  </div>
  <div ng-if="$ctrl.success">
    <p ng-if="!$ctrl.serviceToBind || $ctrl.bindComplete">
      <a ng-href="{{$ctrl.selectedProject | projectUrl : $ctrl.baseProjectUrl}}" ng-click="$ctrl.closePanel()">Continue to the project overview</a> to check the status of your application as it builds and deploys.
    </p>
  </div>
  <div class="results-failure" ng-if="$ctrl.error">
    <div class="results-status">
      <span class="pficon pficon-error-circle-o text-danger" aria-hidden="true"></span>
      <div class="results-message">
        <h3>
          <strong>{{$ctrl.name}}</strong> failed to create in <strong>{{$ctrl.selectedProject | displayName}}</strong>.
        </h3>
      </div>
    </div>
    <div class="sub-title">
      <span ng-if="$ctrl.error.data.message">
        {{$ctrl.error.data.message | upperFirst}}
      </span>
      <span ng-if="!$ctrl.error.data.message">
        An error occurred creating the application.
      </span>
    </div>
    <!-- TODO: Improve error message presentation -->
    <ul ng-if="$ctrl.error.failure.length" class="failure-messages">
      <li ng-repeat="failure in $ctrl.error.failure">
        {{failure.data.message}}
      </li>
    </ul>
  </div>
</div>
